<template>

  <!--  //通过model初始化组件，    ref组件对象，获取组件中的暴露方法，实现黑盒模式的 显式互相调用。-->

  <SearchTablePage :search-config="baseTableSearchModel" :table-config="baseTableModel"/>

</template>

<script lang="ts" setup>
defineOptions({
  name: 'SysAgreementPageData',   //全局别名
  title: '协议管理',   //标题
});
// 接口
import SysAgreementApi from '/@/api/common/SysAgreementApi.ts';


import FORM_FIELD_TYPE from '/@/constants/FormFieldType';
import VDialog from '/@/utils/dialogUtil.ts'

const router = useRouter();
const baseTable = ref(null as any);
const baseTableSearch = ref(null as any);
const editRef = ref<any>(null);

// 表格搜索初始化searchModel
const baseTableSearchModel = ref({
  columnCount: 4,
  expandLimit: 6,
  autoFit: true,
  columnWidth: '300px',
  labelPosition: 'left',
  labelWidth: '100px',
  search: async (reset: Boolean) => {  //搜索、重置按钮  回调方法钩子   实现父类 ---夸组件调用

    let data = await baseTable.value.getList(baseTableSearch.value.formData, reset)
    // console.info(data); //todo 拿不到数据
    $baseMessage(data.message, 'success', 'vab-hey-message-success');

  },
  items: [ //搜索项初始化

    {
      label: "协议类型",
      field: "agreementType",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",

    },

    {
      label: "协议内容",
      field: "detail",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",

    },

    {
      label: "协议分类",
      field: "classify",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",

    },

    {
      label: "协议标题",
      field: "title",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,

      placeholder: "请输入",

    },
    {
      label: "创建时间",
      field: "create_time",
      clearable: true,
      type: FORM_FIELD_TYPE.DATE_RANGE,
      placeholder: "请输入",

      config: {
        props: {   //日期精度配置
          type: "daterange",
          startPlaceholder: "开始日期",
          endPlaceholder: "结束日期",
          format: "YYYY-MM-DD",
        }
      },
    },

  ],

  buttons: [    //功能区域
    // {
    //   name: "下载",
    //   buttonClass: 'primary',
    //   width: 100,
    //   click: () => {   //暴露的方法钩子
    //     SysAgreementApi.pageDataXls(baseTableSearch.value.formData, baseTable.value.getXlsTitle())
    //   }
    // },

    {
      name: "新增",
      buttonClass: 'primary',
      width: 100,
      click: ({row,handlers}) => {        // 点击回调事件方法钩子，  点击触发

        VDialog.open({
          title: '新增',

          content: { //内容初始形式
            type: 'component', //text:"",预留文本
            name: '/common/sysAgreement/edit',
            query: {},

          },

          callBack: (data: any) => {
            baseTable.value.getList(baseTableSearch.value.formData, false);//编辑成功后刷新
          },
          onClose: () => {
            console.log("对话框已关闭");
          },
        });

      },
    },
    {
      name: "批量删除",
      buttonClass: 'danger',
      width: 100,
      isShow: (row: any) => {
        return false;
      },
      click: () => {   //暴露的方法钩子
        console.log(baseTable.value.getSelection());
      },
    },
  ]
})
// 表格初始化Model
const baseTableModel = ref({
  border: true,
  pagination: true,
  inline: true,
  selectable: true,
  isFullscreen: false,
  minWidth: '200px',
  data: {    //table  初始化
    current: 1,
    size: 10,
    total: 100,
    data: []
  },
  requestData: {api: SysAgreementApi.getPageData, query: {}},   //数据源 参数有效性： 'steady|transient'
  columns: [
    {
      label: "",
      field: "id",
      width: 150,
    },

    {
      label: "协议内容",
      tooltip: true,
      field: "detail",
    },
    {
      label: "协议类型",
      field: "agreementType",
      tooltip: true,
      width: 150,
    },
    {
      label: "协议分类",
      field: "classify",
      tooltip: true,
      width: 150,
    },
    {
      label: "标题",
      field: "title",
      tooltip: true,
      width: 150,
    },
    {
      label: "创建时间",
      field: "create_time",
      tooltip: true,
      width: 180,
    },
    {
      label: "更新时间",
      field: "update_time",
      tooltip: true,
      width: 180,
    }
  ],


  actions: [
    // {
    //   name: "详情",

    //   buttonClass: 'primary',
    //   buttonType: 'text',
    //   click: ({row,handlers}) => {
    //     VDialog.open({
    //       title: '详情',
    //       content: { //内容初始形式
    //         type: 'component', //text:"",预留文本
    //         name: '/common/sysAgreement/detail',
    //         query: {sysAgreementId: row.id},

    //       },
    //       callBack: (data: any) => {

    //       },
    //       onClose: () => {
    //         console.log("对话框已关闭");
    //       },
    //     });
    //   },
    //   isShow: (row: object) => {
    //     return true;
    //   },
    //   fixed: 'right'
    // },
    {
      name: "编辑",
      buttonClass: 'primary',   //按钮颜色控制
      buttonType: 'text',      // 按钮风格   text  link  button
      isShow: (row: object) => {  //根据业务做动态隐藏张氏
        return true
      },
      click: ({row,handlers}) => {        // 点击回调事件方法钩子，  点击触发

        VDialog.open({
          title: '编辑',
          content: { //内容初始形式
            type: 'component', //text:"",预留文本
            name: '/common/sysAgreement/edit',
            query: {sysAgreementId: row.id},

          },

          callBack: (data: any) => {
            baseTable.value.getList(baseTableSearch.value.formData, false);//编辑成功后刷新
          },
          onClose: () => {
            console.log("对话框已关闭");
          },
        });

      },
      fixed: 'right'
    },

    {
      name: "删除",
      buttonClass: 'danger',
      buttonType: 'text',
      fixed: 'right',
      click: (row: any, index: Number) => {

        $baseConfirm('您确定要删除当前项吗', null, async () => {

          const {message} = await SysAgreementApi.del({sysAgreementIds: row.id})
          $baseMessage(message, 'success', 'vab-hey-message-success');

          baseTable.value.getList(baseTableSearch.value.formData, false)

        })

      }
    },

  ]

})


onActivated(() => {
})


</script>


